// 路由配置

import Layout from '@/pages/Layout' // src/pages/layout
import Login from '@/pages/Login'

import { createBrowserRouter } from 'react-router-dom'
import { AuthRoute } from '@/components/AuthRoute'
import { Suspense, lazy } from 'react'

// 1. lazy函数对组件进行导入
const Home = lazy(() => import('@/pages/Home'))
const Article = lazy(() => import('@/pages/Article'))
const Publish = lazy(() => import('@/pages/Publish'))
const FirstDemo = lazy(() => import('@/pages/scalePicture/FirstDemo'))
const SecondDemo = lazy(() => import('@/pages/scalePicture/secondDemo/index'))
const CommentDemo = lazy(() => import('@/pages/comments/index'))
const Nav3Ddemo = lazy(() => import('@/pages/Nav3Ddemo/index'))
const LoadingDemo = lazy(() => import('@/pages/LoadingFont/index'))
const NumberClock = lazy(()=> import('@/pages/NumberClock/index'))
const Calculatordemo = lazy (()=> import('@/pages/Calculator/index'))
const Navigationdial = lazy (()=> import('@/pages/Navigationdial/index'))
// 配置路由实例
const router = createBrowserRouter([
  {
    path: "/",
    element: <AuthRoute> <Layout /></AuthRoute>,
    children: [
      {
        index: true,
        element: <Suspense fallback={'加载中'}><Home /></Suspense>
      },
      {
        path: 'article',
        element: <Suspense fallback={'加载中'}><Article /></Suspense>
      },
      {
        path: 'publish',
        element: <Suspense fallback={'加载中'}><Publish /></Suspense>
      },
      {
        path: 'FirstDemo',
        element: <Suspense fallback={'加载中'}><FirstDemo/></Suspense>
      },
      {
        path: 'secondDemo',
        element: <Suspense fallback={'加载中'}><SecondDemo/></Suspense>
      },
      {
        path: 'CommentDemo',
        element: <Suspense fallback={'加载中'}><CommentDemo/></Suspense>
      },
      {
        path: 'Nav3Ddemo',
        element: <Suspense fallback={'加载中'}><Nav3Ddemo/></Suspense>
      },
      {
        path: 'LoadingDemo',
        element: <Suspense fallback={'加载中'}><LoadingDemo/></Suspense>
      },
      {
        path: 'NumberClock',
        element: <Suspense fallback={'加载中'}><NumberClock/></Suspense>
      },
      {
        path: 'Calculatordemo',
        element: <Suspense fallback={'加载中'}><Calculatordemo/></Suspense>
      },
      {
        path: 'Navigationdial',
        element: <Suspense fallback={'加载中'}><Navigationdial/></Suspense>
      }
    ]
  },
  {
    path: "/login",
    element: <Login />
  }
])

export default router